import React from "react";

import { Link} from 'react-router-dom';

import { ajax ,showResultMessage,isNull} from '../../common';

import UIFormView from '../../uicomponents/UIFormView';

import UIView from '../../uicomponents/UIView';

import { Icon, Upload, Button,Row,Col } from 'antd';

/**
 * 导入 UI 数据文件
 */
export default class ImportProductUIDataPanel extends React.Component {

	state = {
		uiDomainId : 0,
		fileList: [],
    	uploading: false,
	}
	
	actionHandler = (actionEvent) => {
        const {importURL} = this.props;
		return {
			ok : () => {
				const { fileList ,uiDomainId} = this.state;
				const formData = new FormData();
				fileList.forEach((file) => {
					formData.append('dataFiles[]', file);
				});
				
				ajax(importURL + '/' + uiDomainId,formData,null,'multipart/form-data').then(data => {
					showResultMessage({
						success: true,
						message: '数据导入完成',
					});
				}).catch(message => {
					showResultMessage({
						success: false,
						message: '数据导入失败 : ' + message,
					});
				});
			},
		}
	}

	onValuesChange = (changedValues, allValues) => {
		
		this.setState({uiDomainId : changedValues.domainId});
		setTimeout(() => {
			this.setToolbarState(this.importViewRef.getToolbar());
		});
		
	}

	setToolbarState = (toolbar) => {
		const {uiDomainId,fileList} = this.state;
		
		if(uiDomainId === 0 || fileList.length === 0){
			toolbar.disable('ok');
		}
		else{
			toolbar.enable('ok');
		}
	}

	render(){

        const {pageTitle,history} = this.props;

		return (
			<UIView 
				title={pageTitle}  
				extra={<Link to="/">返回</Link>} 
				actionGroupId="importProductUIDataActionGroup" 
				actionHandler={this.actionHandler}
				history={history}
				toolbarPosition="bottom"
				setToolbarState={this.setToolbarState}
				ref={(inst) => this.importViewRef = inst}
			>
				<Row>
					<Col span={10}>
						<UIFormView 
							formConfigId="importUIDataForm" 
							bordered={false} 
							ref={(inst) => { this.domainFormRef = inst }}
							onValuesChange={this.onValuesChange}
						/>
					</Col>
				</Row>
				<Row>
					<Col span={10} offset={2}>
						<Upload name="dataFile" 
							showUploadList={true}
							withCredentials={true}
							beforeUpload={(file) => {
								this.setState(({ fileList }) => ({
								fileList: [...fileList, file],
								}));
								setTimeout(() => {
									this.setToolbarState(this.importViewRef.getToolbar());
								});
								return false;
							}}
							onRemove={
								(file) => {
									this.setState(({ fileList }) => {
									  const index = fileList.indexOf(file);
									  const newFileList = fileList.slice();
									  newFileList.splice(index, 1);
									  return {
										fileList: newFileList,
									  };
									});
									setTimeout(() => {
										this.setToolbarState(this.importViewRef.getToolbar());
									});
								}
							} 
							fileList={this.state.fileList}
						>
							<Button>
								<Icon type="upload" /> 选择数据文件
							</Button>
						</Upload>
					</Col>
				</Row>				
			</UIView>
		);
	}
}